HTMLify

* {
    box-sizing: border-box;
}

body {
    background-color: #1d2630;
    display: grid;
    place-items: center;
    height: 100vh;
}

.leo-border-1 {
    position: absolute;
    width: 150px;
    height: 150px;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(0deg, rgba(63, 249, 220, 0.1) 33%, rgb(63 232 249) 100%);
    animation: spin3D 1.8s linear 0s infinite;
}

.leo-core-1 {
    width: 100%;
    height: 100%;
    background-color: #37474faa;
    border-radius: 50%;
}

.leo-border-2 {
    width: 150px;
    height: 150px;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(0deg, rgba(251, 91, 83, 0.1) 33%, rgb(251 83 154) 100%);
    animation: spin3D 2.2s linear 0s infinite;
}

.leo-core-2 {
    width: 100%;
    height: 100%;
    background-color: #1d2630aa;
    border-radius: 50%;
}

@keyframes spin3D {
    from {
        transform: rotate3d(.5, .5, .5, 360deg);
    }

    to {
        transform: rotate3d(0deg);
    }
}